<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       ul{
           list-style: none;
       }

       ul li{
           height: 200px;
           width: 200px;
           background: pink;
           float:left;
           margin:10px 20px;
           line-height: 200px;
           text-align: center;
       }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script>
          $(function(){
              /*
                  隐式迭代：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；
                             而不用我们再进行循环，简化我们的操作，方便我们调用。

                  不足：循环遍历后，给遍历的元素执行的方法都是一致的，相同的

                  如果要对每个元素进行不同的处理，就要用法each()方法进行显式的迭代
               */
             // $(".clicked").text(wjx_sel).prevAll("li").text(wjx_sel);


              var $lis = $("#uList").children("li");

              /*
                  使用each()方法进行显式迭代，可以给遍历的每一个元素设置不用的样式，执行不同的方法


                  第一个参数：表示当前元素的索引号
                  第二个参数：表示当前元素

               */
              $lis.each(function (index,element) {

                  //element 是一个DOM对象
                  $(element).css("opacity",(index + 1) /10);
              })
          })
    </script>
</head>
<body>
<ul id="uList">
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
</ul>
</body>
</html>